<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-plus" @click.native="addsite">新增公告</el-button>
      </div>
      <div class="selech">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="搜索类型">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="content" :placeholder="holder" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%;margin-top:30px;"
    >
      <el-table-column
        fixed
        prop="id"
        label="序号"
        width="50"
      />
      <el-table-column
        prop="title"
        label="公告标题"
        width="150"
      />
      <el-table-column
        prop="author"
        label="作者"
        width="110"
      />
      <el-table-column prop="rating" align="center" label="重要性" width="150">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.rating*1"
            :max="5"
            disabled
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            :low-threshold="1"
            :high-threshold="5"
            style="margin-top:8px;"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="summary"
        label="摘要"
        width="110"
      />
      <el-table-column
        prop="created_at"
        label="创建时间"
        width="180"
      />
      <el-table-column align="center" label="操作" width="320">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleEdit(scope)">编辑查看</el-button>
          <el-button type="danger" size="small" @click="deletegoods(scope.$index, tableData,scope)">删除</el-button>

          <!--<el-button type="primary" size="small" @click="LookGoods(scope)">查看商品</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="pagesize"
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <el-dialog title="商品" width="70%" :visible.sync="ViewGoodsflag">
      <el-table :data="GoodsData">
        <el-table-column property="title" label="公告标题" width="150" />
        <el-table-column property="enumber" label="商品编号" width="100" />
        <el-table-column property="origin" label="产地"width="100" />
        <el-table-column property="paylink" label="购买链接"width="100" />
        <el-table-column align="center" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">正常</el-tag>
            <span v-if="scope.row.status == 2" type="info">需前往企业端解冻</span>
            <el-tag v-if="scope.row.status == 3" type="danger">冻结中</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="320">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 1" type="warning" size="small" @click="enterprisegoods(scope)">冻结</el-button>
            <el-button v-if="scope.row.status == 2" type="warning" size="small" @click="enterprisegoods(scope)">冻结</el-button>
            <el-button v-if="scope.row.status == 3" type="success" size="small" @click="enterprisegoods(scope)">解冻</el-button>
            <el-button type="danger" size="small" @click="DeleteGoods(scope.$index,GoodsData,scope)">删除商品</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="deletegoodsflag"
      width="30%"
    >
      <span>此操作会永久删除该商品，您想好了嘛？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletegoodsflag = false">取 消</el-button>
        <el-button type="primary" @click="DetermineGoods">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="deletegoodsflag"
      width="30%"
    >
      <span>此操作会永久删除该条公告，您想好了嘛？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletegoodsflag = false">取 消</el-button>
        <el-button type="primary" @click="DetermineGoods">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      contenttype: '1', // 该条内容状态
      goodsindex: 0,
      // 企业商品
      ViewGoodsflag: false,
      GoodsData: [],
      deletegoodsflag: false,
      goodsindex: 0,
      goodsrows: [],
      // status 1 为冻结
      // 2 冻结
      // 3超级管理源冻结

      holder: '请输入内容',
      loading: true, //
      pagesize: 2, // 每页条数
      total: 0, // 总条目数
      content: '',
      tableData: [],
      options: [{
        value: 'title',
        label: '公告标题'
      }, {
        value: 'author',
        label: '作者'
      }, {
        value: 'all',
        label: '全部'
      }],
      value: ''
    }
  },
  computed: {
    // 计算属性
  },
  watch: {
    value(v, i) {
      if (v == 'all') {
        this.handleGoods(1)
      }
      switch (v) {
        case 'title':
          this.holder = '请输入公告标题'
          break
        case 'author':
          this.holder = '请输入作者'
          break
      }
    }
  },
  created() {

  },
  mounted() {
    // 生命周期
    this.handleGoods(1)
  },
  methods: {
    deletegoods(index, rows, val) { // 点击删除按钮
      this.goodsindex = index
      this.goodsrows = val.row
      this.deletegoodsflag = true
    },
    DetermineGoods() { // 确认删除
      this.$apifn.DeleteNews({ 'id': this.goodsrows.id }).then((ref) => {
        if (ref.data.Response.code == 200) {
          console.log(ref.data.Response)
          this.tableData.splice(this.goodsindex, 1)
          this.deletegoodsflag = false
          this.$message({
            message: '成功删除该条公告',
            type: 'success'
          })
        }
      }).catch((res) => {
      })
    },
    enterprisegoods(val) { // 冻结企业商品
      console.log(val.row.id.toString())
      this.$apifn.FrozenenterPrisesgoods({ 'id': val.row.id }).then((ref) => {
        if (ref.data.Response.code == 200) {
          console.log(ref.data.Response)
          this.GoodsData.forEach((item) => {
            if (item.id == val.row.id) {
              item.status = ref.data.Response.data.status
            }
          })
        }
      }).catch((res) => {
      })
    },

    handleCurrentChange(val) { // 分页
      this.loading = true
      this.handleGoods(val)
    },
    handfreezing(val) { // 冻结企业
      this.$apifn.freezing({ 'id': val.row.id }).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.tableData.forEach((item) => {
            if (item.id == val.row.id) {
              item.status = ref.data.Response.data.status
            }
          })
        }
      }).catch((res) => {

      })
    },
    addsite() { // 新增企业
      this.$store.dispatch('SetSiteFlag', this.contenttype).then((res) => {
        if (res == 'ok') {
          this.$router.push({ path: '/contentmanagements/create' })
        }
      }).catch((ref) => {
      })
    },
    handleEdit(val) { // 编辑 查看详情
      this.$store.dispatch('SetEnterprise', val.row).then((res) => {
        if (res == 'ok') {
          this.$router.push({ path: '/contentmanagements/create' })
        }
      }).catch((ref) => {
      })
    },
    handleGoods(e) { // 查看商品
      this.$apifn.ShowNews({ 'limit': this.pagesize, 'type': this.contenttype }, e).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.tableData = ref.data.Response.data.data
          this.total = ref.data.Response.data.total
          this.loading = false
        }
      }).catch((res) => {
        this.loading = false
      })
    },
    onSubmit() { // 搜索企业
      if (this.value == '') {
        this.$notify({
          title: '警告',
          message: '请选择搜索类型',
          type: 'warning'
        })
        return false
      }
      if (this.content == '') {
        this.$notify({
          title: '警告',
          message: '请输入搜索内容',
          type: 'warning'
        })
        return false
      }
      this.loading = true
      this.$apifn.SearchNews({ 'status': this.contenttype, 'type': this.value, 'val': this.content }).then((ref) => {
        if (ref.data.Response.code == 200) {
          console.log(ref.data.Response.data)
          this.tableData = ref.data.Response.data
          this.total = 0
          this.loading = false
        }
      }).catch((res) => {
      })
    }
  }
}
</script>
<style scoped>
  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }
  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 147px;

    }

    .add_zhandian {
      width: 100%;
      height: 54px;
    }

    .selech {
      width: 100%;
      height: 50px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }

    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }

    .selech {
      width: 79%;
      height: 100%;
      float: right;

    }
  }
</style>
